<template>
  <div class="detail-wrapper">
    <div class="detail-main">
      <!-- 客户基础信息 -->
      <div class="detail-column" v-if="customerData">
        <div class="column-title">客户基础信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '150px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="客户">{{
              customerData?.name || "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="客户编号">{{
              customerData?.no || "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="客户分类">{{
               classOptions.find((item) => item.value ==customerData?.customer_type_id)
                ?.text
            }}</a-descriptions-item>
            <a-descriptions-item label="状态">{{
             statusOptions.find(
                (item) => item.value == customerData?.customer_status_id
              )?.text
            }}</a-descriptions-item>
            <a-descriptions-item label="所在地区">{{
              customerData?.zone_name
            }}</a-descriptions-item>
            <a-descriptions-item label="所属经销商">{{
              customerData?.dealer_name || "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="备注" :span="2">{{
              customerData?.remark || "-"
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="detail-column">
        <div class="column-title">账号信息</div>
        <div class="column-content">
          <a-descriptions
            bordered
            :labelStyle="{ width: '150px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 2, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="姓名">{{
             datas?.real_name || "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="账号">{{
               datas?.login_name || "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="启用状态">{{  datas?.enabled?'启用':'禁用' }}</a-descriptions-item>
            <a-descriptions-item label="手机">{{
             datas?.mobile || "-"
            }}</a-descriptions-item>
            <a-descriptions-item label="备注" :span="2">{{
               datas?.remark || "-"
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getCityName } from "@/utils/city.ts";
import API from "@/api/administrator";
import SAPI from "@/api/system";
const route = useRoute();
const query = computed(() => route.query);
const datas = ref();
const customerData = ref();
const statusOptions = ref([]);
const zoneoList = ref([]);
const getZoneData = async () => {
  const res = await SAPI.CityCityTree();
  zoneoList.value = res;
};
const getStatusOptions = async () => {
  const res = await API.CustomerStatusOptions({});
  statusOptions.value = res;
};
const classOptions = ref([]);
const getTypeOptions = async () => {
  const res = await API.CustomerTypeOptions({});
  classOptions.value = res;
};
const getData = async () => {
  let params = {
    customer_user_id: query.value.id,
  };
  const res = await API.CustomeruserFetchModel(params);
  // 根据API返回结构，客户信息直接在 data 字段中
  customerData.value = res?.customer;
  // 如果有用户信息，也保存到 datas 中
  datas.value = res?.user;
  let list = zoneoList.value;
  customerData.value.zone_name = getCityName(list, customerData.value.city_id);
};
onMounted(async () => {
  await getTypeOptions();
  await getZoneData();
  await getStatusOptions();
  await getData();
});
</script>

<style scoped>
.detail-wrapper {
  padding: 20px;
}

.detail-main {
  background: #fff;
  border-radius: 8px;
}

.detail-column {
  margin-bottom: 24px;
}

.detail-column:last-child {
  margin-bottom: 0;
}

.column-title {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 16px;
  padding: 0 16px;
}

.column-content {
  padding: 0 16px;
}
</style>
